<!DOCTYPE html>
<html>
<head>
	<title>alloytouch vue example</title>
	<meta name="viewport" content="height= device-height,width=device-width,initial-scale=1.0,user-scalable=no,minimal-ui" />
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- 去除误认电话号码 -->
    <meta name="format-detection" content="telephone=no" />
    <style type="text/css">
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        html {
            -ms-touch-action: none;
        }

        body, ul, li {
            padding: 0;
            margin: 0;
            border: 0;
        }

        body {
            font-size: 12px;
            font-family: ubuntu, helvetica, arial;
            overflow: hidden;
        }

        #header {
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: 100%;
            height: 45px;
            line-height: 45px;
            background: #00ABEB;
            padding: 0;
            color: #eee;
            font-size: 20px;
            text-align: center;
            font-weight: bold;
        }

        #footer {
            position: absolute;
            z-index: 2;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 48px;
            background: #e2e2e2;
            padding: 0;
        }

        #wrapper {
            position: absolute;
            z-index: 1;
            top: 45px;
            bottom: 48px;
            left: 0;
            width: 100%;
            background: #ccc;
            overflow: hidden;
        }

        #scroller {
            position: absolute;
            z-index: 1;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            width: 100%;
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-text-size-adjust: none;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            -o-text-size-adjust: none;
            text-size-adjust: none;
        }

            #scroller ul {
                list-style: none;
                padding: 0;
                margin: 0;
                width: 100%;
                text-align: left;
            }

            #scroller li {
                padding: 0 10px;
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #ccc;
                border-top: 1px solid #fff;
                background-color: #fafafa;
                font-size: 14px;
            }
    </style>
</head>
<body>
	<div id="page">
		<div id="header">AlloyTouch</div>
		<div id="wrapper" v-alloytouch="{options: options, methods:{animationEnd: onAnimationEnd}, min:min, max: max}">
			<div id="scroller" class="alloytouch-target">
				<ul>
					<li>Hello, AlloyTouch!</li>
					<li>AlloyFinger - Super Tiny Size Gestures Library</li>
					<li>Transformjs - Made CSS3 Super Easy</li>
					<li>AlloyFlow - </li>
					<li>Nuclear - Some HTML + Scoped CSS + JS </li>
					<li>AngularJs依赖注入的研究</li>
					<li>是时候使用ES 2015了</li>
					<li>NodeJS中的EventEmitter模块</li>
					<li>手机上的位置传感器</li>
					<li>解读Node.js的cluster模块</li>
					<li>个豆腐干大概 row 11</li>
					<li>突然有人提议任天野 row 12</li>
					<li>月try row 13</li>
					<li>又突然有人停业一天而已 row 14</li>
					<li>鬼斧神工 row 15</li>
					<li>Pretty row 16</li>
					<li>U都是多核的背景下</li>
					<li>Node的单线程设计已</li>
					<li>点点滴滴 row 19</li>
					<li>温度传感器</li>
					<li>反反复复 row 21</li>
					<li>一般包括气压传感器</li>
					<li>官方个豆腐干大概 row 23</li>
					<li>放松放松大方地说 row 24</li>
					<li>岁的琐琐碎碎 row 25</li>
					<li>对智能手机来说几乎是标配</li>
					<li>位于手机正面上方听筒附近位</li>
					<li>撒酒疯凯撒就发生 row 3</li>
					<li>模板分析得到依赖的属性</li>
					<li>据法国恢复对话 row 5</li>
					<li>斯蒂芬森大富大 row 6</li>
					<li>阿道夫萨法 row 7</li>
					<li>发发但是范德萨 row 8</li>
					<li>短发散发的萨芬 row 9</li>
					<li>有重构的团队</li>
					<li>个豆腐干大概 row 11</li>
					<li>突然有人提议任天野 row 12</li>
					<li>月try row 13</li>
					<li>又突然有人停业一天而已 row 14</li>
					<li>鬼斧神工 row 15</li>
					<li>Pretty row 16</li>
					<li>公司的股份的时光飞逝的规定 row 17</li>
					<li>舒服撒发达 row 18</li>
					<li>点点滴滴 row 19</li>
					<li>反反复复 row 20</li>
					<li>反反复复 row 21</li>
					<li>Pretty row 22</li>
					<li>as发生大幅萨芬 row 23</li>
					<li>放松放松大方地说 row 24</li>
					<li>岁的琐琐碎碎 row 25</li>
				</ul>
			</div>
		</div>
		<div id="footer"></div>
		<a href="https://github.com/AlloyTeam/AlloyTouch" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;width:140px;height:140px;">
			<img src="//alloyteam.github.io/github.png" alt="">
		</a>
	</div>
	<script type="text/javascript" src="./vue.min.js"></script>
	<script type="text/javascript" src="../../../alloy_touch.js"></script>
	<script type="text/javascript" src="../../../transformjs/transform.js"></script>
	<script type="text/javascript" src="../../alloy_touch.vue.js"></script>
	<script type="text/javascript">

		Vue.use(vueAlloyTouch);

		new Vue({
			el: '#page',
			data: {
				options: {
					touch:"",//反馈触摸的dom
		            vertical: true,//不必需，默认是true代表监听竖直方向touch
		            target: '#scroller', //运动的对象
		            property: "translateY",  //被滚动的属性
		            sensitivity: 1,//不必需,触摸区域的灵敏度，默认值为1，可以为负数
		            factor: 1,//不必需,默认值是1代表touch区域的1px的对应target.y的1
		            step: 40,
		        },
                min: window.innerHeight - 45 - 48 - 2000,
                max: 0
		    },
		    methods: {
		    	onAnimationEnd(){
		    		console.log('onAnimationEnd')
		    	}
		    }
		})
</script>
</body>
</html>
